<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='二手书商城',active='home'">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script th:src="@{/js/jquery-1.12.4.min.js}"></script>
    <script th:src="@{/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/slide.js}"></script>
    <script th:src="@{/js/index.js}"></script>
    <style>
        body {
            font-family: 'Microsoft Yahei', sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            color: #333;
        }
        .header_con, .search_bar, .navbar_con {
            background: #fff;
            border-bottom: 1px solid #eee;
        }
        .header {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
        }
        .welcome {
            font-size: 14px;
        }
        .fr, .fl {
            display: flex;
            align-items: center;
        }
        .login_btn a, .user_link a {
            margin: 0 6px;
            color: #666;
            text-decoration: none;
        }
        .login_btn a:hover, .user_link a:hover {
            color: #ff3e3e;
        }
        .search_bar {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 0;
            display: flex;
            align-items: center;
        }
        .search_con {
            margin-left: 40px;
            flex: 1;
            display: flex;
        }
        .input_text {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-right: none;
            font-size: 14px;
        }
        .input_btn {
            padding: 10px 20px;
            background-color: #ff3e3e;
            color: white;
            border: none;
            cursor: pointer;
        }
        .input_btn:hover {
            background-color: #e53232;
        }
        .navbar {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
        }
        .subnav_con h1 {
            font-size: 16px;
            margin-bottom: 8px;
        }
        .subnav li {
            list-style: none;
            margin-bottom: 5px;
        }
        .subnav li a {
            text-decoration: none;
            color: #555;
        }
        .navlist li {
            list-style: none;
            margin-left: 20px;
        }
        .navlist li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        .breadcrumb {
            max-width: 1200px;
            margin: 20px auto;
            font-size: 14px;
            color: #666;
        }
        .goods_detail_con {
            max-width: 1200px;
            margin: 30px auto;
            background: #fff;
            padding: 30px;
            box-shadow: 0 0 8px rgba(0,0,0,0.05);
            border-radius: 8px;
        }
        .goods_detail_pic img {
            width: 360px;
            height: 360px;
            object-fit: cover;
            border-radius: 6px;
        }
        .goods_detail_list {
            margin-left: 40px;
            flex: 1;
        }
        .goods_detail_con.clearfix {
            display: flex;
            gap: 20px;
        }
        .prize_bar {
            margin: 20px 0;
            font-size: 20px;
            color: #ff3e3e;
        }
        .num_box input[type=number] {
            padding: 6px 12px;
            font-size: 14px;
            width: 80px;
        }
        .total {
            margin-top: 20px;
            font-size: 18px;
            color: #555;
        }
        .total em {
            color: #ff3e3e;
            font-weight: bold;
        }
        .operate_btn {
            margin-top: 30px;
        }
        .cart_name {
            padding: 10px 30px;
            background: #ff3e3e;
            color: #fff;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .cart_name:hover {
            background: #e03232;
        }
    </style>
</head>
<body>

<!-- 顶部导航 -->
<div class="header_con">
    <div class="header">
        <div class="fr">
            <div class="login_btn fl" th:if="${session.uaccount} != null">
                <a href="#">欢迎您：<em th:text="${session.uaccount}"></em></a>
                <span>|</span>
                <a href="http://localhost:8896/goods/quit">退出</a>
            </div>
            <div class="login_btn fl" th:if="${session.uaccount} == null">
                <a href="http://localhost:8893/admin/tologin">请您登录</a>
            </div>
            <div class="user_link fl">
                <span>|</span>
                <a href="/goods/cartAll">我的购物车</a>
                <span>|</span>
                <a href="/goods/getAllorder">我的订单</a>
            </div>
        </div>
    </div>
</div>

<!-- 搜索栏 -->
<div class="search_bar clearfix">
    <a th:href="@{'getAll?uaccount=' + ${session.uaccount}}" class="logo fl">
    </a>
    <div class="search_con fl">
        <input type="text" class="input_text fl" placeholder="搜索商品">
        <input type="button" class="input_btn fr" value="搜索">
    </div>
</div>

<!-- 导航栏 -->
<div class="navbar_con">
    <div class="navbar clearfix">
        <ul class="navlist fl">
            <li><a href="/getAll">首页</a></li>
        </ul>
    </div>
</div>

<!-- 商品详情 -->
<form action="/goods/cart" method="get">
    <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl">
            <img th:src="${detail.gremain}" alt="商品图">
        </div>
        <div class="goods_detail_list fr">
            <input type="hidden" name="che" th:value="${detail.gid}">
            <input type="text" readonly style="border:none;font-size:24px;color:#ff3e3e;margin-bottom:10px;" name="name" th:value="${detail.gname}">
            <p th:text="${detail.gdetails}" style="margin-bottom: 20px;"></p>

            <div class="prize_bar">
                ¥ <input type="text" readonly style="border:none; background-color: #fff5f5;font-size:20px;color:#ff3e3e;" name="price" th:value="${detail.gprice}">
            </div>

            <div class="num_box" style="margin-top: 20px">
                <label class="num_name fl">数量：</label>
                <input type="number" name="number" min="1" max="99" value="1" step="1" oninput="if(value>99)value=99">
            </div>

            <div class="total">总价：<em>16元</em></div>

            <div class="operate_btn">
                <input type="submit" value="加入购物车" class="cart_name fl">
            </div>
        </div>
    </div>
</form>

</body>
</html>
